import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { lazy } from 'react'
import { Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import Home from './home/Home'

import icon_tab_publish from '@/assets/images/icon_tab_publish.png'

const Shop = lazy(() => import('./shop/Shop'))
const Message = lazy(() => import('./message/Message'))
const Me = lazy(() => import('./me/Me'))
const Publish = lazy(() => import('./publish/Publish'))

const Tabbar = createBottomTabNavigator()

export const MyTabbar = () => {
  const navigation = useNavigation<StackNavigationProp<any>>()
  return (
    <Tabbar.Navigator
      initialRouteName="Home"
      screenOptions={{
        // 控制 tabbar 图标
        tabBarIcon: () => null,
        // 控制 tabbar 样式
        tabBarStyle: {
          flexDirection: 'row',
          alignItems: 'center'
        },
        // 隐藏标题
        headerShown: false
      }}
    >
      <Tabbar.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: ({ focused }) => (
            <Text style={[styles.txt, focused && styles.active]}>首页</Text>
          )
        }}
      ></Tabbar.Screen>
      <Tabbar.Screen
        name="Shop"
        component={Shop}
        options={{
          tabBarLabel: ({ focused }) => (
            <Text style={[styles.txt, focused && styles.active]}>购物</Text>
          )
        }}
      ></Tabbar.Screen>
      <Tabbar.Screen
        name="Publish"
        component={Publish}
        options={{
          // 隐藏 tabbar
          tabBarStyle: { display: 'none' },
          // 设置图标
          tabBarIcon: () => (
            <TouchableOpacity
              onPress={() => {
                navigation.navigate('Publish')
              }}
            >
              <Image source={icon_tab_publish} style={styles.publishIcon}></Image>
            </TouchableOpacity>
          ),
          // 设置文字
          tabBarLabel: () => null
        }}
      ></Tabbar.Screen>
      <Tabbar.Screen
        name="Message"
        component={Message}
        options={{
          tabBarLabel: ({ focused }) => (
            <Text style={[styles.txt, focused && styles.active]}>消息</Text>
          )
        }}
      ></Tabbar.Screen>
      <Tabbar.Screen
        name="Me"
        component={Me}
        options={{
          tabBarLabel: ({ focused }) => (
            <Text style={[styles.txt, focused && styles.active]}>我的</Text>
          )
        }}
      ></Tabbar.Screen>
    </Tabbar.Navigator>
  )
}

const styles = StyleSheet.create({
  txt: {
    fontSize: 16,
    color: '#999'
  },
  active: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333'
  },
  publishIcon: {
    width: 58,
    height: 40,
    resizeMode: 'contain'
  }
})
